vue部分

vue生命周期

生命周期	描述
beforeCreate	组件实例刚被创建,组件属性创建之前,如data属性
created	组件实例创建完成,属性已绑定,但DOM还未生成, $el属性还不存在
beforeMount	模板编译 / 挂载之前
Mounted	模板编译 / 挂载之后
beforeUpdate	组件更新之前
updated	组件更新之后
beforeDestory	组件销毁前调用
destoryed	组件销毁后调用

模板语法

1. 使用双大括号语法
2. 通过使用v-once指令,你也能执行一次性的插值
3. 双大括号将数据解释为普通文本,而非html代码.为了输出真正的html代码,你需要使用v-html指令
4. 使用v-bind来绑定动态属性
5. 2.6版本新增动态指令 v-bind[attr] attr为一个动态值
6. v-bind 缩写 : v-on 缩写 @

计算属性和侦听器

1. 计算属性是基于它们的依赖进行缓存的,只要依赖值没有发生改变,多次访问计算属性,会立即返回之前的计算结果.

class与style绑定

1. 除了可以是字符串之外,还可以是对象或数组
2. v-bind:class="{}", :class="[]", :class="className", class="classNamestring"
3. v-bind:style中css属性名可以用驼峰式或短横线分隔(记得用单引号括起来)
4. :style="{属性名: 属性值}", :style="[表示属性键值对的变量 ,表示属性键值对的变量]"
5. v-bind:style 会自动添加浏览器引擎前缀.

v-if条件渲染

1. 如果想切换多个元素,把<template>元素当做不可见的包裹元素并在<template>元素上使用v-if
2. v-else 来表示"else块", v-else-if 表示 "else-if块"
3. 带有v-show 的元素始终会被渲染并保留在DOM中, v-show只是简单地切换元素css属性display.
4. v-show不支持<template>元素

5.

v-if	v-show
初始渲染条件为假,不渲染	不管初始条件是什么,元素总是会渲染,并只是简单地基于css进行切换
有更高的切换开销	有更高的初始化渲染开销

1. 不推荐同时使用v-if和v-for(哪怕只渲染出一小部分元素,也得每次重新渲染的时候遍历整个列表)
2. 当v-if与v-for一起使用时,v-for具有比v-if更高的优先级

列表渲染

1. 遍历对象为对象时: 第一个参数为键值, 第二个参数为键名, 第三个参数为索引, 遍历对象为数组时: 第一个参数为值, 第二个参数为索引.
2. 建议尽可能使用v-for时,每项都 提供一个唯一的key属性, :key="id"
3. Vue不能检测对象属性的添加和删除
4. Vue不能检测以下变动数组: 1> 当你利用索引直接设置一个项 2> 修改数组的长度.
5. 可以利用带v-for的<template>渲染多个元素

事件处理

1. 可以用v-on监听DOM事件,并在触发时运行一些js代码.
2. 除了直接绑定一个方法,也可以在js语句中调用方法(传参)
3. 访问原始DOM事件,可以用特殊变量$event把它传入方法

4. 事件修饰符

   事件修饰符	描述
   .stop	阻止冒泡
   .prevent	阻止默认行为
   .capture	监听捕获事件
   .once	只执行一次
   .self	只当event.target 是当前元素自身时触发处理函数
   .passive	表示 listener 永远不会调用 preventDefault()。如果 listener 仍然调用了这个函数，客户端将会忽略它并抛出一个控制台警告(来自mdn)

   文档上说: .passive 修饰符尤其能够提升移动端的性能。

表单输入绑定

1. v-model 会忽略所有表单元素的value, checked, selected特性的初始值

2.

修饰符	描述
.lazy	input事件转变为change事件
.number	自动将输入值转为数值类型
.trim	自动过滤用户输入的收尾空白字符

组件基础

1. data 必须是一个函数
2. 每个组件必须只有一个根元素
3. <input v-model="searchText"> 等价于 <input v-bind:value="searchText" v-on:input="searchText = $event.target.value" />
4. 组件名 一种是: kebab-case 一种是 PascalCase
5. porp特性名: camelCase 等价于 kabab-case
6. 事件名: 完全匹配, 推荐始终使用kebab-case的事件名
7. 插槽作用域: 父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的.

未完待续...